<template>
  <div class="dataPage">
    <div class="topVue">
      <div class="top">
        <span style="color: #111; font-weight: 600; font-size: 18px">数据概览</span>
        <div class="filterVue">
          <div class="tabVue">
            <div class="tab" :class="{ active: current === 1 }" @click="tabChange(1)">
              <div class="inner">今日</div>
            </div>
            <div class="tab" :class="{ active: current === 2 }" @click="tabChange(2)">
              <div class="inner">昨日</div>
            </div>
            <div class="tab" :class="{ active: current === 3 }" @click="tabChange(3)">
              <div class="inner">近7天</div>
            </div>
            <div class="tab" :class="{ active: current === 4 }" @click="tabChange(4)">
              <div class="inner">近30天</div>
            </div>
          </div>
          <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
        </div>
      </div>
      <div class="dataVue">
        <div class="data">
          <div class="son">
            <div>
              <div style="color: #6b7280; font-size: 14px">销售额</div>
              <div style="color: #000; font-size: 24px; font-weight: 600; padding-top: 15px">{{ data.valueOfSales || 0 }}</div>
            </div>
            <img src="../../../assets/data1.png" style="width: 66px; height: 66px" />
          </div>
        </div>
        <div class="data">
          <div class="son">
            <div>
              <div style="color: #6b7280; font-size: 14px">订单数</div>
              <div style="color: #000; font-size: 24px; font-weight: 600; padding-top: 15px">{{ data.numberOfOrders || 0 }}</div>
            </div>
            <img src="../../../assets/data2.png" style="width: 66px; height: 66px" />
          </div>
        </div>
        <div class="data">
          <div class="son">
            <div>
              <div style="color: #6b7280; font-size: 14px">销售利润</div>
              <div style="color: #000; font-size: 24px; font-weight: 600; padding-top: 15px">{{ data.salesProfit || 0 }}</div>
            </div>
            <img src="../../../assets/data3.png" style="width: 66px; height: 66px" />
          </div>
        </div>
        <div class="data">
          <div class="son">
            <div class="son">
              <div>
                <div style="color: #6b7280; font-size: 14px">销售产品数</div>
                <div style="color: #000; font-size: 24px; font-weight: 600; padding-top: 15px">{{ data.numberOfProductsSold || 0 }}</div>
              </div>
              <img src="../../../assets/data4.png" style="width: 66px; height: 66px" />
            </div>
          </div>
        </div>
        <div class="data">
          <div class="son">
            <div class="son">
              <div>
                <div style="color: #6b7280; font-size: 14px">新增用户</div>
                <div style="color: #000; font-size: 24px; font-weight: 600; padding-top: 15px">{{ data.newUsers || 0 }}</div>
              </div>
              <img src="../../../assets/data5.png" style="width: 66px; height: 66px" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="centerVue">
      <div class="center_left">
        <div style="color: #111; font-weight: 600; font-size: 18px; padding: 15px">销售额趋势</div>
        <kline_1 ref="kline_1"></kline_1>
      </div>
      <div class="center_right">
        <div style="color: #111; font-weight: 600; font-size: 18px; padding: 15px">充值额趋势</div>
        <kline_2 ref="kline_2"></kline_2>
      </div>
    </div>
    <div class="botVue">
      <div class="bot_left">
        <div style="color: #111; font-weight: 600; font-size: 18px; padding: 15px">月回购率</div>
        <kline_3 ref="kline_3"></kline_3>
      </div>
      <div class="botCenter">
        <div style="color: #111; font-weight: 600; font-size: 18px; padding: 15px">配送距离时间统计</div>
        <kline_4 ref="kline_4"></kline_4>
      </div>
      <div class="botRight">
        <div style="color: #111; font-weight: 600; font-size: 18px; padding: 15px">配送环节时间统计</div>
        <kline_5 ref="kline_5"></kline_5>
      </div>
    </div>
  </div>
</template>

<script>
import { platformData } from "@/api/msg"
import kline_1 from '../components/kline_1.vue';
import kline_2 from '../components/kline_2.vue';
import kline_3 from '../components/kline_3.vue';
import kline_4 from '../components/kline_4.vue';
import kline_5 from '../components/kline_5.vue';
export default {
    components: {
        kline_1,
        kline_2,
        kline_3,
        kline_4,
        kline_5
    },
    data(){
        return {
            current: 1,
            endTime: "",
            startTime: "",
            timeType: "",
            date: "",
            data: {
                newUsers: 0,
                numberOfOrders: 0,
                numberOfProductsSold: 0,
                salesProfit: 0,
                valueOfSales: 0
            }
        }
    },
    created(){
        this.init()
    },
    mounted(){
        this.$refs.kline_1.initCharts()
        this.$refs.kline_2.initCharts()
        this.$refs.kline_3.initCharts()
        this.$refs.kline_4.initCharts()
        this.$refs.kline_5.initCharts()
    },
    methods: {
        tabChange(index){
            this.current = index
            this.init()
        },
        init(){
            platformData({
                endTime: this.endTime,
                startTime: this.startTime,
                timeType: this.current
            }).then(res=>{
                this.data = res
            })
        }
    }

}
</script>

<style lang="scss">
.topVue {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  padding: 15px 15px 30px;
  .top {
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .filterVue {
    display: flex;
    .tabVue {
      display: flex;
      width: 312px;
      height: 32px;
      border-radius: 3px;
      background: #e7e7e7;
      margin-right: 15px;
      .tab {
        width: 78px;
        height: 32px;
        padding: 2px;
        cursor: pointer;
        .inner {
          width: 74px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          color: rgba(0, 0, 0, 0.6);
          border-radius: 4px;
        }
      }
      .active {
        .inner {
          background: #fff;
          color: #000;
        }
      }
    }
  }
  .dataVue {
    width: 100%;
    height: 120px;
    display: flex;
    margin-top: 22px;
    justify-content: space-between;
    .data {
      width: 20%;
      height: 120px;
      border-radius: 10px;
      padding-left: 4px;
      .son {
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px 0 30px;
      }
    }
    .data:nth-child(1) {
      background: #3b82f6;
      margin-right: 10px;
    }
    .data:nth-child(2) {
      background: #10b981;
      margin: 0 10px;
    }
    .data:nth-child(3) {
      background: #eab308;
      margin: 0 10px;
    }
    .data:nth-child(4) {
      background: #ec4899;
      margin: 0 10px;
    }
    .data:nth-child(5) {
      background: #a855f7;
      margin-left: 10px;
    }
  }
}
.centerVue {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  .center_left,
  .center_right {
    width: 50%;
    height: 400px;
    background: #fff;
    border-radius: 6px;
    padding-bottom: 50px;
  }
  .center_left {
    margin-right: 10px;
  }
  .center_right {
    margin-left: 10px;
  }
}

.botVue {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  .bot_left,
  .botCenter,
  .botRight {
    width: 33.33333%;
    height: 400px;
    background: #fff;
    border-radius: 6px;
    padding-bottom: 50px;
  }
  .botCenter {
    margin: 0 20px;
  }
}
</style>
